Grids (Flexbox)

<div class="row">
  <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
    <div class="drizzle-u-box">
      Responsive1
    </div>
  </div>
  <div class="col-xs-12 col-sm-4 col-md-6 col-lg-8">
    <div class="drizzle-u-box">
      Responsive2
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-offset-3 col-xs-9">
    <div class="drizzle-u-box">
      Offset Column
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs">
    <div class="drizzle-u-box">
      Auto1
    </div>
  </div>
  <div class="col-xs">
    <div class="drizzle-u-box">
      Auto2
    </div>
  </div>
  <div class="col-xs">
    <div class="drizzle-u-box">
      Auto3
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs">
    <div class="drizzle-u-box">
      Auto4
    </div>
  </div>
  <div class="col-xs">
    <div class="drizzle-u-box">
      Auto5
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs drizzle-u-nested">
    <div class="row">
      <div class="col-xs">
        <div class="drizzle-u-box">
          Nested1
        </div>
      </div>
      <div class="col-xs">
        <div class="drizzle-u-box">
          Nested2
        </div>
      </div>
      <div class="col-xs">
        <div class="drizzle-u-box">
          Nested3
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs drizzle-u-nested">
    <div class="row">
      <div class="col-xs">
        <div class="drizzle-u-box">
          Nested4
        </div>
      </div>
      <div class="col-xs">
        <div class="drizzle-u-box">
          Nested5
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row start-xs">
  <div class="col-xs-6">
    <div class="drizzle-u-box">
      Align Start
    </div>
  </div>
</div>

<div class="row center-xs">
  <div class="col-xs-6">
    <div class="drizzle-u-box">
      Align Center
    </div>
  </div>
</div>

<div class="row end-xs">
  <div class="col-xs-6">
    <div class="drizzle-u-box">
      Align End
    </div>
  </div>
</div>